<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- SEO优化主要有title和description以及keywords标签组成 -->
		<title>品优购商城-综合网购首选-正品低价品质保障配送及时轻松购物</title>
		<!-- 网站说明 为了增强网站被搜索的机率-->
		<meta name="description" content="品优购商城-专业的综合网上购物商城,销售家电数码通讯电
		脑家居百货服装服饰母婴图书食品等数万个品牌优质商品.便捷诚信的服务,为您提供愉悦的网
		上购物体验!"/>
		<!-- 关键字 一般把网站最好的商品放到前面-->
		<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,
		配件,手表,储存卡"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
	    <link rel="stylesheet" type="text/css" href="css/common.css"/>
	    <link rel="shortcut icon" href="favicon.ico" />
	    <link rel="stylesheet" type="text/css" href="css/index.css"/>
	    <!-- 引入js -->
		<!-- animate必须写到index.js的上面，因为有animate.js才能引入index.js -->
		<script src="js/animate.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入首页的js -->
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	    <!-- 引入电梯模块的jquery的js模块 -->
		<script src="js/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/dianti.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 快捷导航模块 start-->
		<div class="shortcut">
			<div class="w">
				<div class="fl">
					<ul>
						<li>品优购欢迎您!&nbsp;</li>
						<li>
							<a href="#">请登录</a>&nbsp;<a href="注册.html" class="style-red">免费注册</a>
						</li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li>我的订单</li>
						<li></li>
						<li class="arrow-icon">我的品优购</li>
						<li></li>
						<li>品优购会员</li>
						<li></li>
						<li>企业采购</li>
						<li></li>
						<li class="arrow-icon">关注品优购</li>
						<li></li>
						<li class="arrow-icon">客户服务</li>
						<li></li>
						<li class="arrow-icon">网站导航</li>
					</ul>
				</div>
			</div>
		</div>
	    <!-- 快捷导航模块 end	 -->
		<!-- header头部模块 start -->
		<header class="header w">
			<!-- logo模块 -->
			<div class="logo">
				<h1>
					<a href="index.html" title="品优购商城">品优购商城</a>
				</h1>
			</div>
			<!-- search搜索模块 -->
			<div class="search">
				<input type="search" name="" id="" placeholder="语言开发"/>
				<button>搜索</button>
			</div>
			<!-- hotwords模块制作 -->
			，<div class="hotwords">
				<a href="#" class="style-red">优惠购首发</a>
				<a href="#">亿元优惠</a>
				<a href="#">9.9元团购</a>
				<a href="#">每满99减20</a>
				<a href="#">办公用品</a>
				<a href="#">电脑</a>
				<a href="#">通信</a>
			</div>
			<!-- 购物车模块 -->
			<div class="shopcar">
				<a href="gouwuche.html" target="_blank">我的购物车</a>
			    <i class="count">80000000</i>
			</div>
		</header>
		<!-- header头部模块 end -->
		<!-- 导航模块 start -->
		<div class="nav">
			<div class="w">
				<div class="dropdown">
					<div class="dt">全部商品分类</div>
				    <div class="dd">
						<ul>
							<li><a href="#">家用电器</a></li>
							<li><a href="#">手机</a> <a href="#">数码</a> <a href="#">通信</a></li>
							<li><a href="#">电脑</a><a href="#">办公</a></li>
							<li><a href="#">家居</a><a href="#">家具</a><a href="#">家装</a><a href="#">厨具</a></li>
							<li><a href="#">男装</a><a href="#">女装</a><a href="#">童装</a><a href="#">内衣</a></li>
						    <li><a href="#">个护化妆</a><a href="#">清洁用品</a><a href="#">宠物</a></li>
							<li><a href="#">鞋靴</a><a href="#">箱包</a><a href="#">珠宝</a><a href="#">奢侈品</a></li>
							<li><a href="#">运动户外</a><a href="#">钟表</a></li>
							<li><a href="#">汽车</a><a href="#">汽车用品</a></li>
							<li><a href="#">母婴</a><a href="#">玩具乐器</a></li>
							<li><a href="#">食品</a><a href="#">酒类</a><a href="#">生鲜</a><a href="#">特产</a></li>
							<li><a href="#">医疗保健</a></li>
							<li><a href="#">图书</a><a href="#">音像</a><a href="#">电子书</a></li>
							<li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li>
							<li><a href="#">理财</a><a href="#">众筹</a><a href="#">白条</a><a href="#">保险</a></li>
						</ul>
					</div>
				</div>
				<div class="navitems">
					<ul>
						<li><a href="#">服装城</a></li>
						<li><a href="#">美妆馆</a></li>
						<li><a href="#">品优超市</a></li>
						<li><a href="#">全球购</a></li>
						<li><a href="#">闪购</a></li>
						<li><a href="#">团购</a></li>
						<li><a href="#">拍卖</a></li>
						<li><a href="#">有趣</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 导航模块 end -->
		
		<!-- 首页专有的模块start -->
		<div class="w">
		    <div class="main">
				<div class="focus">
					<!-- 左侧按钮 -->
					<a href="javascript:;" class="arrow-l">&lt;</a>
					<!-- 右侧按钮 -->
					<a href="javascript:;" class="arrow-r">&gt;</a>
					<ul>
						<li><img src="upload/focus.jpg"></li>
						<li><img src="upload/focus1.jpg"></li>
						<li><img src="upload/focus2.jpg"></li>
						<li><img src="upload/focus3.jpg"></li>
					</ul>
					<ol class="circle">
						
					</ol>
				</div>
				<div class="newsflash">
					<div class="news">
						<div class="news_hd">
							<h5>品优购快报</h5>
							<a href="#" class="more">更多</a>
						</div>
						<div class="news_bd">    
							<ul class="list">                                          
								<li><a href="#">[特惠] 它来了它来了,兆华老师走来了</a></li>
								<li><a href="#">[特惠] 它来了它来了,苏州老师走来了</a></li>
								<li><a href="#">[特惠] 它来了它来了,振东老师走来了,它是一个好老师，收人尊敬的好老师</a></li>
								<li><a href="#">[特惠] 它来了它来了,徐浪老师</a></li>
								<li><a href="#">[特惠] 它来了它来了,罗镇林老师走来了,它是一个好老师</a></li>
							</ul>
						</div>
					</div>
					<script src="jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
					<script type="text/javascript">
						$(function() {
							$(".news_bd").hover(function() { //鼠标指向了滚动区域
								clearTimeout(timeID); //终止超时,停止滚动
							},function() { //鼠标离开滚动区域
								timeID = setInterval("autoScroll()", 2000); //设置超时函数,每过3秒执行一次函数
							});
						});
						
						function autoScroll() {
							$(".list").animate({
								marginTop : "-25px"
							},500,function() {   //appendto:加到最后
								$(this).css({"margin-top": "0px"}).find("li:first").appendTo(this); //把列表第一行移动到列表最后一行
							});
						}
					var timeID = setInterval("autoScroll()", 2000); //设置超时函数,每过3秒执行一次函数
					</script>
					<div class="lifeservice">
						<ul>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
							<li>
								<i></i>
								<p>话费</p>
							</li>
						</ul>
					</div>
					<div class="bargain">
						<img src="upload/ad.jpg" >
					</div>
					
				</div>
			</div>
		</div>
		<!-- 首页专有的模块end -->
		
		<!-- 推荐模块start -->
		<div class="w recom">
			<div class="recom_hd">
				<img src="images/下载.png">
			    <p style="color: #fff;">今日推荐</p>
			</div>
			<div class="recom_bd">
				<ul>
					<li>
						<a href="#"><img src="upload/tj01.png" ></a>
					</li>
					<li>
						<a href="#"><img src="upload/tj01.png" ></a>
					</li>
					<li>
						<a href="#"><img src="upload/tj01.png" ></a>
					</li>
					<li>
						<a href="#"><img src="upload/tj01.png" ></a>
					</li>
				</ul>
			</div>
		</div>
	<!-- 	推荐模块end -->
	
	<!-- 楼层区域制作 start -->
	<!-- 1楼家用电器楼层 -->
	<div class="floor">
		<!-- 1楼家用电器楼层 -->
		<div class="w jiadian">
			<div class="box_hd">
				<h3>家用电器</h3>
				<div class="tab_list">
					<ul>
						<li><a href="#" class="style-red">热门</a>|</li>
						<li><a href="#">大家电</a>|</li>
						<li><a href="#">厨房电器</a>|</li>
						<li><a href="#">个护健康</a>|</li>
						<li><a href="#">应季电器</a>|</li>
						<li><a href="#">空气/净水</a>|</li>
						<li><a href="#">新奇特</a>|</li>
						<li><a href="#">高端电器</a></li>
					</ul>
				</div>
			</div>
			<div class="box_bd">
				<div class="tab_content">
					<div class="tab_list_item">
						<div class="col_210">
							<ul>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
							</ul>
							<a href="#"><img src="upload/tu.jpg" ></a>
						</div>
						<div class="col_329">
							<a href="#"><img src="upload/sao%20.jpg" ></a>
						</div>
						<div class="col_221">
							<a href="#" class="bb"><img src="upload/kao.jpg" height="150"></a>
							<a href="#"><img src="upload/si.jpg" width="219" height="185"></a>
						</div>
						<div class="col_221">
							<a href="#"><img src="upload/zai.jpg" height="361"></a>
						</div>
						<div class="col_219">
							<a href="#" class="bb"><img src="upload/juan.jpg" width="219" height="160"></a>
							<a href="#"><img src="upload/xiang.jpg" width="219" height="185"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 2楼手机通讯楼层 -->
	<div class="floor">
		<div class="w shouji">
			<div class="box_hd">
				<h3>手机通讯</h3>
				<div class="tab_list">
					<ul>
						<li><a href="#" class="style-red">热门</a>|</li>
						<li><a href="#">大家电</a>|</li>
						<li><a href="#">厨房电器</a>|</li>
						<li><a href="#">个护健康</a>|</li>
						<li><a href="#">应季电器</a>|</li>
						<li><a href="#">空气/净水</a>|</li>
						<li><a href="#">新奇特</a>|</li>
						<li><a href="#">高端电器</a></li>
					</ul>
				</div>
			</div>
			<div class="box_bd">
				<div class="tab_content">
					<div class="tab_list_item">
						<div class="col_210">
							<ul>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
							</ul>
							<a href="#"><img src="upload/tu.jpg" ></a>
						</div>
						<div class="col_329">
							<a href="#"><img src="upload/sao%20.jpg" ></a>
						</div>
						<div class="col_221">
							<a href="#" class="bb"><img src="upload/kao.jpg" height="150"></a>
							<a href="#"><img src="upload/si.jpg" width="219" height="185"></a>
						</div>
						<div class="col_221">
							<a href="#"><img src="upload/zai.jpg" height="361"></a>
						</div>
						<div class="col_219">
							<a href="#" class="bb"><img src="upload/juan.jpg" width="219" height="160"></a>
							<a href="#"><img src="upload/xiang.jpg" width="219" height="185"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <!-- 3楼电脑办公楼层 -->
    <div class="floor">
    	<div class="w diannaobangong">
    		<div class="box_hd">
    			<h3>电脑办公</h3>
    			<div class="tab_list">
    				<ul>
    					<li><a href="#" class="style-red">热门</a>|</li>
    					<li><a href="#">大家电</a>|</li>
    					<li><a href="#">厨房电器</a>|</li>
    					<li><a href="#">个护健康</a>|</li>
    					<li><a href="#">应季电器</a>|</li>
    					<li><a href="#">空气/净水</a>|</li>
    					<li><a href="#">新奇特</a>|</li>
    					<li><a href="#">高端电器</a></li>
    				</ul>
    			</div>
    		</div>
    		<div class="box_bd">
    			<div class="tab_content">
    				<div class="tab_list_item">
    					<div class="col_210">
    						<ul>
    							<li><a href="#">节能补贴</a></li>
    							<li><a href="#">4k电视</a></li>
    							<li><a href="#">节能补贴</a></li>
    							<li><a href="#">4k电视</a></li>
    							<li><a href="#">节能补贴</a></li>
    							<li><a href="#">4k电视</a></li>
    						</ul>
    						<a href="#"><img src="upload/tu.jpg" ></a>
    					</div>
    					<div class="col_329">
    						<a href="#"><img src="upload/sao%20.jpg" ></a>
    					</div>
    					<div class="col_221">
    						<a href="#" class="bb"><img src="upload/kao.jpg" height="150"></a>
    						<a href="#"><img src="upload/si.jpg" width="219" height="185"></a>
    					</div>
    					<div class="col_221">
    						<a href="#"><img src="upload/zai.jpg" height="361"></a>
    					</div>
    					<div class="col_219">
    						<a href="#" class="bb"><img src="upload/juan.jpg" width="219" height="160"></a>
    						<a href="#"><img src="upload/xiang.jpg" width="219" height="185"></a>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
	<!-- 精品家居模块 -->
	<div class="floor">
		<div class="w jingpingjiaju">
			<div class="box_hd">
				<h3>精品家居</h3>
				<div class="tab_list">
					<ul>
						<li><a href="#" class="style-red">热门</a>|</li>
						<li><a href="#">大家电</a>|</li>
						<li><a href="#">厨房电器</a>|</li>
						<li><a href="#">个护健康</a>|</li>
						<li><a href="#">应季电器</a>|</li>
						<li><a href="#">空气/净水</a>|</li>
						<li><a href="#">新奇特</a>|</li>
						<li><a href="#">高端电器</a></li>
					</ul>
				</div>
			</div>
			<div class="box_bd">
				<div class="tab_content">
					<div class="tab_list_item">
						<div class="col_210">
							<ul>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
								<li><a href="#">节能补贴</a></li>
								<li><a href="#">4k电视</a></li>
							</ul>
							<a href="#"><img src="upload/tu.jpg" ></a>
						</div>
						<div class="col_329">
							<a href="#"><img src="upload/sao%20.jpg" ></a>
						</div>
						<div class="col_221">
							<a href="#" class="bb"><img src="upload/kao.jpg" height="150"></a>
							<a href="#"><img src="upload/si.jpg" width="219" height="185"></a>
						</div>
						<div class="col_221">
							<a href="#"><img src="upload/zai.jpg" height="361"></a>
						</div>
						<div class="col_219">
							<a href="#" class="bb"><img src="upload/juan.jpg" width="219" height="160"></a>
							<a href="#"><img src="upload/xiang.jpg" width="219" height="185"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 楼层区域制作 end -->
	
	  <!-- 固定电梯导航 -->
	<div class="fixedtool">
	        <ul>
	            <li class="current">家用电器</li>
	            <li>手机通讯</li>
	            <li>电脑办公</li>
	            <li>精品家居</li>
				<li><a href="index.html">返回顶部</a></li>
	        </ul>
	    </div>
	
		<!-- 底部模块的制作 start -->
		<footer class="footer">
			<div class="w">
				<div class="mod_service">
					<ul>
						<li>
							<h5></h5>
							<div class="service_txt">
								<h4>正品保障</h4>
							    <p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<h5></h5>
							<div class="service_txt">
								<h4>正品保障</h4>
							    <p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<h5></h5>
							<div class="service_txt">
								<h4>正品保障</h4>
							    <p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<h5></h5>
							<div class="service_txt">
								<h4>正品保障</h4>
							    <p>正品保障，提供发票</p>
							</div>
						</li>
					</ul>
				</div>
			    <div class="mod_help">
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl>
						<dt>服务指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl>
						<dt>帮助中心</dt>
						<dd>
							<img src="images/yzh.png" width="90" height="90" >
						    品优购客户端
						</dd>
					</dl>
                    
				</div>
			    <div class="mod_copyright">
					<div class="links">
						<a href="#">关于我们</a>| <a href="#">联系我们</a>| <a href="#">联系客服</a>| <a href="#">商家入驻</a>| 
						<a href="#">营销中心</a>| <a href="#">手机品优购</a>| <a href="#">友情链接</a>| <a href="#">销售联盟</a>| 
						<a href="#">品优购社区</a>| <a href="#">品优购公益</a>| <a href="#">English Site</a>| <a href="#">Contact U</a>|
					</div>
					<div class="copyright">
						地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
						京ICP备08001421号京公网安备110108007702
					</div>
				</div>
			</div>
		</footer>
		<!-- 底部模块的制作 end -->
		<!-- 引入图片懒加载的js文件 -->
		<!-- 必须在这里引入懒加载插件，这是必须在图片加载后引入 -->
		<script src="js/EasyLazyload.min.js" type="text/javascript" charset="utf-8"></script>
	    <script>
		   lazyLoadInit({
		      coverColor:"white",
		      coverDiv:"<h1>test</h1>",
		      offsetBottom:0,
		      offsetTopm:0,
		      showTime:1100,
		      onLoadBackEnd:function(i,e){
		          console.log("onLoadBackEnd:"+i);
		      },
		      onLoadBackStart:function(i,e){
		          console.log("onLoadBackStart:"+i);
		      }
		  });		  
	    </script>
	</body>
</html>